<!-- @format -->

<template>
  <div class="code-example">
    <div class="example-item">
      <div class="example-title">基础用法</div>
      <div class="example-content">
        <comp-code v-model="code1" :length="4" @complete="onComplete" />
      </div>
    </div>

    <div class="example-item">
      <div class="example-title">自定义长度</div>
      <div class="example-content">
        <comp-code v-model="code2" :length="4" @complete="onComplete" />
      </div>
    </div>

    <div class="example-item">
      <div class="example-title">隐藏发送按钮</div>
      <div class="example-content">
        <comp-code
          v-model="code3"
          :show-send-btn="false"
          @complete="onComplete"
        />
      </div>
    </div>

    <div class="example-item">
      <div class="example-title">自定义倒计时</div>
      <div class="example-content">
        <comp-code
          v-model="code4"
          :countdown="10"
          resend-text="重新获取验证码"
          @complete="onComplete"
          @resend="onResend"
        />
      </div>
    </div>

    <div class="example-item">
      <div class="example-title">禁用状态</div>
      <div class="example-content">
        <comp-code v-model="code5" :disabled="true" @complete="onComplete" />
      </div>
    </div>

    <div class="example-item">
      <div class="example-title">自动聚焦</div>
      <div class="example-content">
        <comp-code v-model="code6" :auto-focus="true" @complete="onComplete" />
      </div>
    </div>

    <div class="example-item">
      <div class="example-title">方法调用</div>
      <div class="example-content">
        <comp-code
          ref="codeRef"
          v-model="code7"
          @complete="onComplete"
          @resend="onResend"
        />
        <div class="example-buttons">
          <div class="example-button" @click="handleFocus">聚焦</div>
          <div class="example-button" @click="handleClear">清空</div>
          <div class="example-button" @click="handleSetValue">设置值</div>
          <div class="example-button" @click="handleStartCountdown">
            开始倒计时
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import CompCode from './Index.vue';

  // 验证码值
  const code1 = ref('');
  const code2 = ref('');
  const code3 = ref('');
  const code4 = ref('');
  const code5 = ref('');
  const code6 = ref('');
  const code7 = ref('');

  // 验证码组件引用
  const codeRef = ref<InstanceType<typeof CompCode> | null>(null);

  // 输入完成回调
  const onComplete = (value: string) => {
    console.log('验证码输入完成:', value);
    uni.showToast({
      title: `验证码: ${value}`,
      icon: 'none',
    });
  };

  // 重新发送回调
  const onResend = () => {
    console.log('重新发送验证码');
    uni.showToast({
      title: '已发送验证码',
      icon: 'none',
    });
  };

  // 聚焦
  const handleFocus = () => {
    codeRef.value?.focus();
  };

  // 清空
  const handleClear = () => {
    codeRef.value?.clear();
  };

  // 设置值
  const handleSetValue = () => {
    codeRef.value?.setValue('123456');
  };

  // 开始倒计时
  const handleStartCountdown = () => {
    codeRef.value?.startCountdown();
  };
</script>

<style lang="scss" scoped>
  .code-example {
    padding: 16px;

    .example-item {
      margin-bottom: 24px;

      .example-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 12px;
      }

      .example-content {
        background-color: #f5f7fa;
        padding: 16px;
        border-radius: 4px;
      }

      .example-buttons {
        display: flex;
        flex-wrap: wrap;
        margin-top: 16px;

        .example-button {
          margin-right: 12px;
          margin-bottom: 8px;
          padding: 6px 12px;
          background-color: #409eff;
          color: #fff;
          border-radius: 4px;
          font-size: 14px;
        }
      }
    }
  }
</style>
